<template>
    <div>
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
            <el-form-item label="部门名称" prop="deptName">
                <el-input
                        v-model="queryParams.deptName"
                        placeholder="请输入部门名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="部门状态" clearable size="small">
                    <el-option
                            v-for="dict in statusOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                        type="primary"
                        plain
                        icon="el-icon-plus"
                       
                        @click="handleAddDept"
                >新增
                </el-button>
            </el-col>
        </el-row>

        <el-table :data="deptList" row-key="deptId" default-expand-all
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
            <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
            <el-table-column prop="status" label="状态" :formatter="statusFormat" width="100"></el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" width="200"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template v-slot="scope">
                    <el-button
                           
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdateDept(scope.row)"
                    >修改
                    </el-button>
                    <el-button
                           
                            type="text"
                            icon="el-icon-plus"
                            @click="handleAddDept(scope.row)"
                    >新增
                    </el-button>
                    <el-button
                            v-if="scope.row.parentId != 0"
                           
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDeleteDept(scope.row)"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <update-dept :open="open" :title="title" :form="form"
                 :dept-options="deptList"
                 v-on:dialogStatusChanged="changeDialogStatus($event)">
    </update-dept>
</template>

<script>
    import {listDept,deleteSysDept} from '/src/api/system/dept'
    import updateDept from './update.vue'

    export default {
        name: "index",
        components: {updateDept},
        data() {
            return {
                showSearch: true,
                statusOptions: [],
                queryParams: {},
                deptList: [],
                //新增或修改的
                open: false,
                title: '',
                form: {},
            }
        },
        created() {
            this.getDeptListByParam();
            this.getDicts("sys_normal_disable").then(response => {
                this.statusOptions = response.data;
            });
        },
        methods: {
            /** 查询部门列表 */
            getDeptListByParam() {
                listDept(this.queryParams).then(response => {
                    this.deptList = response.data
                });
            },
            handleQuery() {
                this.getDeptListByParam()
            },
            resetQuery() {
                this.resetForm('queryForm')
                this.getDeptListByParam()
            },
            handleAddDept(row) {
                this.form = {}
                if (row != null && row.deptId) {
                    this.form.parentId = row.deptId;
                    this.form.parentName = row.deptName
                } else {
                    this.form.parentId = 0;
                    this.form.parentName = ''
                }
                this.title = "新增部门信息"
                this.open = true
            },
            handleUpdateDept(row) {
                this.form = row
                const parentId = row.parentId
                //获取父级名称
                if (parentId === 0) {
                    this.form.parentName = '根部门'
                } else {
                    this.getParentDeptName(this.deptList, parentId)
                }
                this.title = "修改部门信息"
                this.open = true
            },
            handleDeleteDept(row) {
                this.$confirm('是否确认删除名称为"' + row.deptName + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return deleteSysDept(row.deptId);
                }).then(() => {
                    this.getDeptListByParam();
                    this.msgSuccess("删除成功");
                })
            },
            // 字典状态字典翻译
            statusFormat(row, column) {
                return this.selectDictLabel(this.statusOptions, row.status);
            },
            //更改弹出框的状态
            changeDialogStatus(status) {
                this.open = status
                this.getDeptListByParam()
            },
            //根据父级ID获取父级菜单名称
            getParentDeptName(deptList, parentId) {
                for (let i = 0; i < deptList.length; i++) {
                    const deptInfo = deptList[i]
                    if (deptInfo.deptId === parentId) {
                        this.form.parentName = deptInfo.deptName
                    }
                    if (deptInfo.children && deptInfo.children.length > 0) {
                        this.getParentDeptName(deptInfo.children, parentId)
                    }
                }
            },
        },
    }
</script>

<style scoped>

</style>
